<style scoped>
.home-wrapper {
	padding-bottom: 1rem;
}
.header {
	padding: .15rem 0 .66rem .3rem;
	color:#FFF;
	font-size: .24rem;
	background-color: #377CFF;
}
.room-info.opacity {
	opacity: .6;
}
.room-number {
	&::before, &::after {
		content: "";
		display: inline-block;
		width: .44rem;
		height: .44rem;
		vertical-align: middle;
		background: url(~@/assets/home/location.png);
		background-size: 100% 100%;
	}
}
.room-number::after {
	display: none;
	background-image: url(~@/assets/home/arrow.png);;
}
.room-number.multiple::after {
	display: inline-block;
}
.user-info {
	display: flex;
	align-items: center;
	margin-top: .33rem;
}
.avatar {
	min-width: 1.08rem;
	height: 1.08rem;
	margin-right: .28rem;
}
.info {
	flex: auto;
	font-size: .36rem;
}
.username {
	font-weight: 500;
}
.tag {
	display: inline-block;
	padding: 0 .16rem;
	margin-top: .16rem;
	font-size: .24rem;
	line-height: .36rem;
	border-radius: .18rem;
	border: 2px solid rgba(161, 193, 255, .5);
	background-color: rgba(255, 255, 255, .18);
}

.nav-wrapper {
	margin-top: -.31rem;
	border-radius: .42rem .42rem 0 0;
	background-color: #FFF;
}
.nav {
	display: flex;
	justify-content: space-around;
	align-items: center;
	color: #333;
	font-size: .28rem;
}
.nav-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #333;
	font-size: .28rem;

	&::before {
		content: "";
		width: 1.28rem;
		height: 1.28rem;
		background-size: 100% 100%;
	}
}
@for $i from 1 to 3 {
    .nav-link:nth-of-type($i)::before {
        background-image: url(~@/assets/home/nav-icon-$i.png);
    }
}

.sub-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: .61rem .45rem 0;
	color: #666;
	font-size: .24rem;
}
.sub-nav-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: .36rem;

	&::before {
		content: "";
		width: .58rem;
		height: .58rem;
		background-size: 100% 100%;
	}
}
@for $i from 1 to 4 {
    .sub-nav-item:nth-of-type($i)::before {
        background-image: url(~@/assets/home/sub-nav-icon-$i.png);
    }
}

.container {
	margin: 0 .45rem;
	color: #333;
	font-size: .32rem;
}
.title {
	margin-top: .6rem;
	margin-bottom: .24rem;
	font-size: inherit;
	font-weight: 500;
}
.content-img {
	width: 100%;
	height: 1.8rem;
	object-fit: cover;
}

.theme-list {
	display: flex;
	flex-wrap: wrap;
}
.theme-item {
	width: 3.13rem;
	margin-bottom: .32rem;
	height: 1.4rem;
	background-size: 100% 100%;
}
.theme-item:nth-child(2n) {
	margin-left: .32rem;
}
@for $i from 1 to 6 {
    .theme-item:nth-of-type($i) {
        background-image: url(~@/assets/home/theme-$i.png);
    }
}

.building-wrapper {
	display: flex;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, .2);
}
.building-content {
	width: 5.6rem;
	height: 6.76rem;
	padding-top: 4.15rem;
	margin: auto;
	position: relative;
	color: #333;
	font-size: .3rem;
	text-align: center;
	box-sizing: border-box;
	border-radius: .08rem;
	background: #FFF url(~@/assets/no-data.png) center top 1.3rem no-repeat;
	background-size: 4.8rem 2.7rem;
}
.building-close {
	width: .88rem;
	height: .88rem;
	position: absolute;
	bottom: .32rem;
	left: 50%;
	background: url(~@/assets/close.png);
	background-size: 100% 100%;
	transform: translateX(-50%);
}

.health-code-image {
	display: block;
	width: 3.28rem;
	height: 3.3rem;
	margin: .48rem auto 0;
	object-fit: cover;
}
.building-content.health-code {
	padding-top: .52rem;
	position: relative;
	color: #333;
	font-size: .36rem;

	&::before {
		content: "";
		width: .88rem;
		height: .88rem;
		position: absolute;
		top: 0;
		left: 50%;
		border-radius: 50%;
		background: #FFF url(~@/assets/home/health-code.png) center no-repeat;
		background-size: .64rem .64rem;
		transform: translate(-50%, -50%);
	}
}
</style>

<template>
	<div class="home-wrapper">
		<header class="header">
			<template v-if="isLogin">
				<div class="room-info">
					<span class="room-number multiple" @click="$router.push('/choose-room')">{{roomNumber}}</span>
				</div>

				<div class="user-info">
					<img :src="userInfo.avatar" class="avatar">
					<div class="info">
						<h3 class="username">Hi,  亲爱的{{userInfo.username}}</h3>
						<span class="tag">辖区住户</span>
					</div>
				</div>
			</template>
			<template v-else>
				<div class="room-info opacity">
					<span class="room-number">登录后查看</span>
				</div>

				<div class="user-info">
					<img src="~@/assets/man.png" class="avatar">
					<div class="info">登录</div>
				</div>
			</template>
		</header>

		<div class="nav-wrapper">
			<nav class="nav">
				<div class="nav-link" v-for="(item, index) of nav" @click="callNav(index, item)">{{item.text}}</div>
			</nav>

			<div class="sub-nav">
				<div class="sub-nav-item" v-for="(item, index) of subNav" @click="callSubNav(index, item)">{{item.text}}</div>
			</div>
		</div>

		<div class="container">
			<h2 class="title">重要内容</h2>

			<img class="content-img" src="https://img01.sogoucdn.com/app/a/100520020/e981016c9b8a20db5778c66be5d646f1" title="疫情防控">

			<h2 class="title">热门主题</h2>

			<ul class="theme-list" @click="building">
				<li class="theme-item" v-for="item of themeList"></li>
			</ul>
		</div>

		<footer-tab :activedIndex="1" @scan="building" />

		<div class="building-wrapper" v-if="buildingModal">
			<div class="building-content">
				页面正在努力建设中…

				<span class="building-close" @click="buildingModal = false"></span>
			</div>
		</div>

		<div class="building-wrapper" v-if="healthCodeModal">
			<div class="building-content health-code">
				杭州健康码

				<img :src="healthCodeImage" class="health-code-image">

				<span class="building-close" @click="healthCodeModal = false"></span>
			</div>
		</div>
	</div>
</template>

<script>
	import {mapState} from 'vuex'

	export default {
		name: 'home',

		data() {
			return {
				roomNumber: '房间号',

				nav: [
					{
						text: '访客预约',
						path: '/yueyue'
					},
					{
						text: '报料',
						path: '/dfsd'
					},
					{
						text: '报修'
					}
				],

				subNav: [
					{
						text: '居民安居码'
					},
					{
						text: '物业缴费'
					},
					{
						text: '房屋租售'
					},
					{
						text: '车辆管理',
						path: '/car-record'
					}
				],

				themeList: [
					{
						text: '办事指南',
						path: '/yueyue'
					},
					{
						text: '疫情防控',
						path: '/dfsd'
					},
					{
						text: '租房指南',
						path: '/ds'
					},
					{
						text: '垃圾分类',
						path: '/ds'
					},
					{
						text: '社区养老',
						path: '/ds'
					},
					{
						text: '医疗健康',
						path: '/ds'
					}
				],

				buildingModal: false,

				healthCodeImage: 'https://img01.sogoucdn.com/app/a/100520020/e981016c9b8a20db5778c66be5d646f1',
				healthCodeModal: false
			}
		},

		computed: {
			... mapState(['isLogin', 'userInfo'])
		},

		methods: {
			callNav(index, item) {
				if (item.path) {
					return this.$router.push(item.path)
				}

				this.building()
			},
			callSubNav(index, item) {
				if (item.path) {
					return this.$router.push(item.path)
				}

				if (index === 0) {
					this.healthCodeModal = true

					return
				}

				if (index === 1 || index === 2) {
					this.building()
					return
				}
			},
			building() {
				this.buildingModal = true
			}
		}
	}
</script>